<template>
  <div class="taskView">
    <div p-5>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="任务详情">
          <TaskInfo :id="route.query.id" :title="false"></TaskInfo>
        </a-tab-pane>
        <a-tab-pane key="2" tab="任务审批记录">
          <DynamicTable
            :data-request="approveTableData"
            :columns="approveCoumns"
            :search="false"
            :pagination="false"
            :showToolBar="false"
            bordered
          >
          </DynamicTable>
        </a-tab-pane>
      </a-tabs>
    </div>

    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-button size="large" @click="cacel">关闭</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import router from '@/router';
  import { ref, onMounted } from 'vue';
  import { getApproveRecord } from '@/api/administrative';
  import TaskInfo from '../approveView/components/taskInfo.vue';
  import { useTable } from '@/components/core/dynamic-table';
  const [DynamicTable, dynamicTableInstance] = useTable();
  import { approveCoumns } from './columns';
  const route = useRoute();

  const activeKey = ref('1');

  const approveTableData = async (params): Promise<API.TableListResult> => {
    const data = await getApproveRecord(route.query.id);
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const cacel = () => {
    router.push({
      path: '/administrative/administrative/approve',
    });
  };
</script>
<style lang="less" scoped>
  .taskView {
    background-color: rgba(255, 255, 255, 1);
  }
</style>
